<template>
	<el-card shadow="never">
		<el-form
            :inline="true"
            :model="state.queryForm"
            @keyup.enter="getDataList()">
			<el-form-item>
				<el-input
                    v-model="state.queryForm.username"
                    placeholder="用户名">
                </el-input>
			</el-form-item>
			<el-form-item>
				<el-input
                    v-model="state.queryForm.address"
                    placeholder="登录地点">
                </el-input>
			</el-form-item>
			<el-form-item>
				<el-select
                    v-model="state.queryForm.status"
                    style="width: 100px"
                    placeholder="登录状态"
                    clearable>
                    <el-option label="成功" value="1"></el-option>
                    <el-option label="失败" value="0"></el-option>
                </el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="downloadExcel()">导出</el-button>
			</el-form-item>
			<el-form-item>
				<el-button type="danger" @click="deleteBatch()">删除</el-button>
			</el-form-item>
		</el-form>
		<el-table
            v-loading="state.loading"
            :data="state.dataList"
            style="width: 100%"
            border 
            @selection-change="selectionIds">
			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
			<el-table-column prop="id" label="序号" header-align="center" align="center"></el-table-column>
			<el-table-column prop="username" label="用户名" header-align="center" align="center"></el-table-column>
			<el-table-column prop="ip" label="登录IP" header-align="center" align="center">
                <template #default="scope">
                    {{ 
                        scope.row.ip === '127.0.0.1' || scope.row.ip === '::1' 
                        ? '本机访问' 
                        : scope.row.ip 
                    }}
                </template>
            </el-table-column>
			<el-table-column prop="address" label="登录地点" header-align="center" align="center"></el-table-column>
			<el-table-column prop="userAgent" label="User Agent" show-overflow-tooltip header-align="center" align="center">
                <template #default="scope">
                    {{ parseUserAgent(scope.row.userAgent) }}
                </template>
            </el-table-column>
			<fast-table-column prop="status" label="登录状态" dict-type="success_fail"></fast-table-column>
			<fast-table-column prop="operation" label="操作信息" dict-type="login_operation"></fast-table-column>
			<el-table-column prop="createTime" label="登录时间" header-align="center" align="center" width="165">
                <template #default="scope">
                    {{ scope.row.createTime.replace('T', ' ').split('+')[0] }}
                </template>
            </el-table-column>
		</el-table>

		<!-- 分页 -->
        <div style="margin-top: 20px;">
            <el-pagination
                layout="prev, pager, next"
                v-model:current-page="pagination.page"
                :page-size="pagination.limit"
                :total="pagination.total"
                @current-change="onPageChange"
                background >
            </el-pagination>
        </div>
	</el-card>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { logStore } from '@/store/log'
import { UAParser } from 'ua-parser-js'

const parseUserAgent = (ua) => {
  try {
    const parser = new UAParser(ua)
    const browser = parser.getBrowser()
    const os = parser.getOS()
    return `${browser.name} ${browser.version} / ${os.name} ${os.version || ''}`
  } catch {
    return ua || '未知设备'
  }
}

const useLogStore = logStore() // 日志模块
const state = reactive({
    loading: false, // 加载中
    dataList: [], // 数据列表
    queryForm: { // 查询表单
        username: '', // 用户名
        address: '', // 登录地点
        status: '', // 登录状态
    },
})

const pagination = reactive({ // 分页
    page: 1, // 当前页
    limit: 10, // 每页显示条数
    total: 0, // 总条数
})

const getDataList = async () => { // 获取数据列表
    state.loading = true; // 加载中
    try {
        await useLogStore.fetchLoginLogs({ // 调用接口
            ...state.queryForm, // 查询表单
            page: pagination.page, // 当前页
            limit: pagination.limit, // 每页显示条数
        });
        // console.log(useLogStore.loginLogs); // 输出响应数据
        state.dataList = useLogStore.loginLogs; // 数据列表
        pagination.total = useLogStore.pagination.total; // 总条数
    } catch (error) { // 错误处理
        console.error(error); // 输出错误信息
    } finally { // 不管是否出错都执行
        state.loading = false; // 加载中
    }
}

const downloadExcel = async () => { // 导出Excel
    try {
        // const res = await exportLoginLogExcel({ // 调用接口
        //     ...state.queryForm, // 查询表单
        // });
        // window.open(res.url); // 打开Excel文件
        ElMessage.success('导出成功'); // 提示成功
    } catch (error) { // 错误处理
        console.error(error); // 输出错误信息
        ElMessage.error('导出失败'); // 提示失败
    }
}

const selectedIds = ref([]); // 选中的行
const selectionIds = (selection) => { // 选择行
    selectedIds.value = selection.map(item => item.id); // 选中的行
    console.log(selectedIds.value); // 输出选择的行
}

const onPageChange = (page) => { // 分页
    pagination.page = page; // 当前页
    getDataList(); // 获取数据列表
}

onMounted(() => { // 页面加载
    getDataList(); // 获取数据列表
})

const deleteBatch = async (key) => { // 删除
    const ids = key ? [key] : selectedIds.value
    if (ids.length === 0) {
      ElMessage.warning('请选择删除记录')
      return
    }

    try { 
        const confirm = await ElMessageBox.confirm('确定进行删除操作?', '提示', { 
            confirmButtonText: '确定', // 确定按钮
            cancelButtonText: '取消', // 取消按钮
            type: 'warning', // 类型
        }) // 确认框
        if (confirm === 'confirm') { // 如果点击了确定按钮
            await useLogStore.deleteLoginLogs(ids) // 调用接口
            ElMessage.success('删除成功') // 提示成功
            getDataList() // 获取数据列表
        } // 如果点击了取消按钮
    } catch (error) { // 错误处理
        if (error !== 'cancel') { // 如果不是点击了取消按钮
            ElMessage.error(error.message || '删除失败') // 提示失败
        }
    } 
}

</script>

<style lang="scss" scoped>

</style>